<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <title>金职伟业运营管理平台</title>
    <meta name="keywords" content="金职伟业运营管理平台">
    <meta name="description" content="金职伟业运营管理平台">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/login.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->
    <script>
        if (window.top !== window.self) {
            window.top.location = window.location;
        }
    </script>

</head>
<style>
    #layui-layer-shade2 {
        z-index: 19891013 !important;
    }
</style>

<body class="signin">
<div class="signinpanel">
    <div class="row">
        <div class="col-sm-7">
            <div class="signin-info">
                <div class="logopanel m-b">
                    <h1>金职伟业</h1>
                </div>
                <div class="m-b"></div>
                <h3>
                    欢迎使用 <strong>金职伟业运营管理平台</strong>
                </h3>
                <ul class="m-b">
                    <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i>
                        更快
                    </li>
                    <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 更便捷</li>
                    <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 更高效、更懂你</li>
                </ul>

            </div>
        </div>
        <div class="col-sm-5">
            <form id="signupForm">
                <h3 class="text-center">用户登录</h3>
                <p class="m-t-md text-center">欢迎登录金职伟业运营管理平台</p>
                <input type="text" id="username" name="username" class="form-control uname"/>
                <input type="password" id="password" name="password" class="form-control pword m-b"/>
                <div style="display: flex;align-items: center">
                    <input style="flex: 1" type="text" id="yzm" name="code"
                           class="form-control"  placeholder="请输入验证码">
                    <div id="sendyzm" style="margin-top: 15px;
    padding: 7px;
    border: 1px solid;
    background: #00A3FF;
    color: #fff;">发送验证码
                    </div>
                </div>
                <!--                <input type="text" id="yzm" class="form-control" placeholder="请输入验证码">-->
                <button class="btn btn-login btn-block">登录</button>
                <!--按钮模块-->
                <!--<div class="outside-login">-->
                <!--<div class="outside-login-tit">-->
                <!--<span>第三方登录</span>-->
                <!--</div>-->
                <!--<div class="outside-login-cot">-->
                <!--<a class="outside-login-btn wxoa actived J-btnSwitchLoginType" target="_Blank"-->
                <!--href="javascript:void();" onclick="login4qq()">-->
                <!--<em><img alt="QQ" src="/img/login_qq.png" height="32" width="32"></i></em>-->
                <!--</a>-->
                <!--<a class="outside-login-btn wxoa actived J-btnSwitchLoginType" target="_Blank"-->
                <!--href="javascript:void();" onclick="login4wechat()">-->
                <!--<em><img alt="微信" src="/img/login_wechat.png" height="32" width="32"></i></em>-->
                <!--</a>-->
                <!--</div>-->
                <!--</div>-->

            </form>
        </div>
    </div>
    <div class="signup-footer">
        <div class="pull-left">
            <a target="_blank" href="http://www.jzwy123.com/">版权所有：湖南金职伟业母婴护理有限公司</a><br>
            <a href="http://beian.miit.gov.cn" target="_blank">备案号：湘ICP备20003916号</a>
        </div>
    </div>
</div>
<div id="lookView" style="display: none;text-align: center;line-height: 100px">
    <select id="org" style="width: 200px; border: 1px lightskyblue solid; border-radius: 5px;height: 30px;color: black">

    </select>
</div>
<script th:inline="javascript"> var ctx = [[@{/}]] ; </script>
<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4" th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
<script src="/js/bootstrap.min.js?v=3.3.6" th:src="@{/js/bootstrap.min.js?v=3.3.6}"></script>

<!-- 自定义js -->
<script src="/js/content.js?v=1.0.0" th:src="@{/js/content.js?v=1.0.0}"></script>

<!-- jQuery Validation plugin javascript-->
<script src="/js/plugins/validate/jquery.validate.min.js"
        th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>
<script src="/js/plugins/validate/messages_zh.min.js" th:src="@{/js/plugins/validate/messages_zh.min.js}"></script>
<script src="/js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script type="text/javascript">
    //回车登录
    document.onkeydown = cdk;

    function cdk() {
        if (event.keyCode == 13) {
            login();
        }
    }

    $(document).ready(function () {
        var countdownTimer;
        var remainingTime = 60;

        $('#sendyzm').click(function () {
            console.log('发送验证码按钮被点击');
            if (!$('#username').val()) {
                layer.msg('请输入用户名');
                return false;
            }
            // 在这里添加您的处理逻辑
            if (remainingTime === 60) {
                $.ajax({
                    url: `/jzApi/utils/sendLoginCode?name=` + $('#username').val(),
                    type: "get",
                    success: function (r) {

                    }
                });
                $('#sendyzm').text(remainingTime + ' 秒后重发');
                countdownTimer = setInterval(function () {
                    remainingTime--;
                    $('#sendyzm').text(remainingTime + ' 秒后重发');
                    if (remainingTime > 0) {
                        $('#sendyzm').text(remainingTime + ' 秒后重发');
                        $('#sendyzm').css('background-color', 'gray');
                    } else {
                        clearInterval(countdownTimer); // 清除定时器
                        $('#sendyzm').css('background-color', '#00A3FF');
                        $('#sendyzm').text('发送验证码');
                        remainingTime = 60
                    }
                }, 1000);
            }

        });
        console.log(ctx);
        validateRule();

    });

    $.validator.setDefaults({
        submitHandler: function () {
            login();
        }
    });

    function login4qq() {
        alert('QQ登录完善中')
        return false;
    }

    function login4wechat() {
        alert('微信登录完善中')
        return false;
    }

    function login() {
        var username = $("#username").val();
        var password = $("#password").val();
        var code = $("#yzm").val();
        if ('' == username) {
            layer.msg('请输入用户名');
            return false
        }
        if ('' == password) {
            layer.msg('请输入密码');
            return false
        }
        if ('' == code) {
            layer.msg('请输入密码');
            return false
        }

        var s = "";
        for (var i = 0; i < password.length; i++) {
            s += String.fromCharCode(password.charAt(i).charCodeAt() ^ 't'.charCodeAt());
        }
        $.ajax({
            type: "POST",
            url: ctx + "login",
            data: {
                username: username,
                password: s,
                code:code
            },
            success: function (r) {
                if (r.code == 0) {
                    if (r.data == null) {
                        parent.location.href = '/index';
                    } else {
                        var list = r.data;
                        var opt = '<option value="">请选择机构</option>';
                        for (var i = 0; i < list.length; i++) {
                            opt += '<option value="' + list[i].id + '">' + list[i].name + '</option>'
                        }
                        $("#org").html(opt);
                        layer.open({
                            title: '请选择机构',
                            type: 1,
                            area: ['280px', '250px'],
                            fixed: false, //不固定
                            btn: ['确定', '取消'],
                            // shadeClose:false,
                            maxmin: true,
                            content: $("#lookView"),
                            yes: function () {
                                var orgId = $("#org").val();
                                if (orgId != "") {
                                    $.ajax({
                                        type: 'POST',
                                        data: {orgId: orgId},
                                        url: ctx + "org",
                                        success: function (r) {
                                            if (r.code == 0) {
                                                parent.location.href = '/index';
                                            } else {
                                                layer.msg(r.msg);
                                            }
                                        }
                                    })
                                } else {
                                    layer.msg("请选择机构")
                                }
                            },
                            success: function () {


                            }
                        });

                    }
                } else if (r.code = 40400) {
                    layer.msg(r.msg);
                } else {
                    layer.msg(r.msg);
                }
            }
        });
    }

    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#signupForm").validate({
            rules: {
                username: {
                    required: true
                },
                password: {
                    required: true
                },
                code:{
                    required: true

            }
            },
            messages: {
                username: {
                    required: icon + "请输入您的用户名",
                },
                password: {
                    required: icon + "请输入您的密码",
                },
                code: {
                    required: icon + "请输入验证码",
                }
            }
        })
    }
</script>

</body>


</html>
